import React from "react";
import { Sticky } from "react-vant";
import styles from "./style.module.scss";

import iconWhite from "../../assets/images/icon/hdpi/common_icon_back_white_n.png";
import iconBlack from "../../assets/images/icon/hdpi/common_icon_back_black_n.png";

interface PropsType {
  title: string | React.ReactNode;
  leftArrow?: boolean; //是否展示左箭头  默认true
  theme?: string; //主题 black|white 对应黑白  默认黑
  onClickLeft?: () => void;
  rightText?: React.ReactNode;
  style?: React.CSSProperties;
}

export const MyNavBar: React.FC<PropsType> = ({
  title,
  leftArrow = true,
  theme = "black",
  onClickLeft,
  rightText,
  style,
}) => {
  return (
    <Sticky>
      <div className={styles.myNavBar} style={style}>
        <div
          className={styles["nav-left"]}
          onClick={() => onClickLeft && onClickLeft()}
        >
          {leftArrow ? (
            <img
              className={styles.leftArrow}
              src={theme === "black" ? iconBlack : iconWhite}
              alt=""
            />
          ) : null}
        </div>
        <div
          className={styles["nav-center"]}
          style={{ color: theme === "black" ? "#333" : "#fff" }}
        >
          {title}
        </div>
        <div className={styles["nav-right"]}>{rightText}</div>
      </div>
    </Sticky>
  );
};
